<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<!-- Bootstrap -->
<link rel="stylesheet"
	href="${pageContexntextPath}/resource/css/bootstrap.min.css">
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]-->
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<!--[endif]-->
<title></title>
</head>
<body>
	<div class="container">
		<nav>
			<ul class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#management"
					aria-controls="" role="tab" data-toggle="tab">管理 </a></li>
				<li><a href="#addcategory" aria-controls="" role="tab"
					data-toggle="tab" id="addType">添加 一级项目</a></li>
			</ul>
		</nav>
	</div>

	<div class="tab-content">
		<div class="tab-pane active row" role="tabpanel" id="management">
			<table class="table table-striped table-hover table-responsive">
				<thead>
					<tr>
						<td class="col-lg-2">排序</td>
						<td class="col-lg-8">分类名称</td>
						<td class="col-lg-2">操作</td>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${typeNamelist[0]}" var="firstNames">
						<tr>
							<td class="col-lg-2">${firstNames.order}</td>
							<td class="col-lg-8"><span> ${firstNames.typeName} </span> <a
								href="category/addtype?id=${firstNames.id}"> +添加子类</a></td>
							<td class="col-lg-2"><a
								href="category/updatetype?id=${firstNames.id}">编辑</a> <a
								href="category/delType?id=${firstNames.id}">删除</a></td>
						</tr>
						<c:forEach items="${firstNames.childrenType}" var="secondNames">
							<tr>
								<c:if test="${firstNames.id != secondNames.id}">
									<td class="col-lg-2">${secondNames.order}</td>
									<td class="col-lg-8"><span
										class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
										<span>${secondNames.typeName}</span></td>
									<td class="col-lg-2"><a
										href="category/updatetype?id=${secondNames.id}">编辑</a> <a
										href="category/delType?id=${secondNames.id}">删除</a></td>
								</c:if>
							</tr>
						</c:forEach>
					</c:forEach>

				</tbody>
			</table>
		</div>

		<div class="tab-pane" role="tabpanel" id="addcategory">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">添加一级项目</h3>
				</div>
				<div class="panel-body">
					<div class="container-fluid">
						<sf:form class="form-horizontal" method="post"
							modelAttribute="productType" action="category/creatType">
							<div class="form-group">
								<label for="typeName" class="control-label col-lg-2">一级名称</label>
								<div class="col-lg-9">
									<sf:input class="form-control" type="text" id="typeName"
										path="typeName" />
								</div>
							</div>
							<div class="form-control-static col-lg-3 col-lg-offset-5">
								<input type="submit" class="btn btn-success btn-lg" value="提交">
							</div>
						</sf:form>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="resource/js/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="resource/js/bootstrap.min.js"></script>
</body>
</html>